<script setup lang="ts">

</script>

<template>
  <div class="wrap">
    <div class="container">
      <div class="item" item-name="tom">
        <span>Tom</span>
      </div>
      <div class="item" item-name="jack">
        <span>Jack</span>
      </div>
      <div class="item" item-name="lucy">
        <span>Lucy</span>
      </div>
      <div class="item" item-name="nick">
        <span>Nick</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;

  .container {
    width: 800px;
    display: grid;
    grid-template-columns: 50% 25% 25% 25%;

    outline: 2px dashed #f36;
    box-shadow: 0 0 0 6px rgb(0 0 0 / 13%);
    border-radius: 2px;
    position: relative;

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
      background-color: #f7f7f7;
      font-size: 2rem;
      color: #fff;
      text-shadow: 1px 1px 0 rgb(0 0 0 / 0.5), -1px -1px 0 rgb(0 0 0 / 0.05);
      font-weight: 500;
      &:nth-child(1) {
        background-color: #f1c2c6;
      }
      &:nth-child(2) {
        background-color: #dac2f1;
      }
      &:nth-child(3) {
        background-color: #ccf1c2;
      }
      &:nth-child(4) {
        background-color: #c2e9f1;
      }
    }
  }
}
</style>
